<template>
	<view class="tableApply">
		<xbd-pages-content title="餐桌申请">
			<template #content>
				<view class="content" :style="'minHeight : ' + windowHeight + 'px;'">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="85" required label="就餐日期" name="dateSta">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateSta" :start="startDate" :end="endDate"
										@change="bindDateChangeSta">
										<view class="uni-input">
											<view class="">
												<image src="../../../static/images/date2.svg"></image>
												<text>{{formData.dateSta}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
							<view class="tag">
								至
							</view>
							<uni-forms-item  name="dateEnd">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateEnd" :start="startDate" :end="endDate"
										@change="bindDateChangeEnd">
										<view class="uni-input">
											<view class="">
												<image src="../../../static/images/date2.svg"></image>
												<text>{{formData.dateEnd}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="85" required label="就餐日期" name="dateSta">
								<view class="box">
									<xbd-date-pickers fields="day" :date="formData.dateSta" :visible.sync="visible" @setDate="setDateChange1">
										<template>
											<view @click="visible = true">
												<image class="date2-img" src="@/static/images/date2.svg" mode=""></image>
												<text>{{ formData.dateSta }}</text>
											</view>
										</template>
									</xbd-date-pickers>
								</view>
							</uni-forms-item>
							<view class="tag">
								至
							</view>
							<uni-forms-item name="dateEnd">
								<view class="box">
									<xbd-date-pickers fields="day" :date="formData.dateEnd" :visible.sync="visible1" @setDate="setDateChange2">
										<template>
											<view  @click="visible1 = true">
												<image class="date2-img" src="@/static/images/date2.svg" mode=""></image>
												<text>{{ formData.dateEnd }}</text>
											</view>
										</template>
									</xbd-date-pickers>

								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->

						<uni-forms-item class="area" :label-width="85" required label="申请理由" name="reason">
							<uni-easyinput :clearable="false" class="textarea" type="textarea"
								v-model="formData.reason" placeholder="请填写申请理由" :maxlength="100">
							</uni-easyinput>
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="mit">
								字数限制：100
							</view>
							<!-- #endif -->
						</uni-forms-item>

						<uni-forms-item :label-width="85" required label="用餐人数" name="number">
							<uni-easyinput class="input" type="text" v-model="formData.number" placeholder="请输入用餐人数" />
						</uni-forms-item>
						<uni-forms-item :label-width="85" required label="人均金额" name="money">
							<view class="moneyBox">
								<text>80</text>
								<text>元/人</text>
							</view>
						</uni-forms-item>

					</uni-forms>
					<view class="foot">
						<view class="btns">
							<button type="default" class="draft" @click="cancel">取消</button>
							<button type="default" class="upload" @click="submit">提交申请</button>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {
		Meal
	} from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				flag: true,//防抖
				visible:false,
				visible1:false,
				formData: {
					dateSta: currentDate,
					dateEnd: currentDate,
					reason: '',
					number: '',
					money: '80',
				},
				rules: {
					dateSta: {
						rules: [{
							required: true,
							errorMessage: '就餐日期：请选择就餐开始日期',
						}]
					},
					dateEnd: {
						rules: [{
							required: true,
							errorMessage: '就餐日期：请选择就餐结束日期',
						},
						{
							validateFunction: (rule, value, data, callback) => {
								if (value < this.formData.dateSta) {
									callback('就餐日期：请重新选择就餐日期')
								}
								return true
							}
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '申请理由：请填写申请理由',
						}],
						validateTrigger: 'bind'
					},
					number: {
						rules: [{
							required: true,
							errorMessage: '用餐人数：请填写用餐人数',
						},
						{
							pattern: '^\\+?[1-9]\\d*$',
							errorMessage: '用餐人数：请输入大于0的整数',
						}]
					},
				}
			};
		},
		methods: {
			setDateChange1(date){
				console.log(date)
				this.formData.dateSta = date
			},
			setDateChange2(date){
				this.formData.dateEnd = date
			},
			cancel(){
				uni.navigateBack({
					delta: 1
				});
			},

			bindDateChangeSta: function(e) {
				this.formData.dateSta = e.target.value
				this.dateSta = e.target.value
			},
			bindDateChangeEnd: function(e) {
				this.formData.dateEnd = e.target.value
				this.dateEnd = e.target.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async submit(val) {
				const info = {
					ticket_type:'table',
					reason: this.formData.reason,
					person_count: +this.formData.number,
					start_time: this.formData.dateSta ,
					end_time: this.formData.dateEnd ,
					average: +this.formData.money,  // 人均金额
				};
				this.$refs.form.setRules(this.rules)
				try {
					const valid = await this.$refs.form.validate();
					  if (this.flag) {
					  	try {
					  		this.flag = false
							this.$showLoading('加载中');
					  		const res = await Meal.postTicketApply(info);
							uni.hideLoading();
							if(res.success){
								uni.showToast({
									title: '您的申请提交成功！',
									icon: 'none',
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							}else{
								this.flag = true
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
					  	} catch (err) {
					  	}
					  };
				} catch(err) {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				}
			},
		},
		computed: {
			...mapState(['windowHeight']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-button:after {
		border: none !important;
	}
	::v-deep .uni-input {
		white-space: nowrap;
	}
	::v-deep .uni-forms-item__label {
		align-items: flex-start;
	}
	::v-deep .input.data-v-5b515ef8 {
		box-sizing: border-box;
		width: 100%;
	}
	::v-deep .is-input-error-border{
		border: 0;
	}
	::v-deep .uni-easyinput {
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
	}
	::v-deep .data-v-5b515ef8 {
		vertical-align: sub;
		font-size: 28rpx;
		color: #999999;
		white-space: nowrap;
	}
	::v-deep .uni-forms-item__content {
		min-height: 56rpx;
		font-size: 28rpx;
		color: #999999;
		white-space: nowrap;
	}

	::v-deep .label-text.data-v-61dfc0d0 {
		font-size: 32rpx;
		white-space: nowrap;
	}

	.content {
		padding: 50rpx 30rpx 50rpx 50rpx;
		background-color: #FFFFFF;
	}

	.input {
		height: 64rpx;
		border: 1px solid #999999;
		border-radius: 5px;
		paddingt: 0 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.foot {
		margin-top: 100rpx;
		.btns {
			display: flex;
			justify-content: space-between;

			button {
				width: 300rpx;
				height: 30px;
				line-height: 30px;
				font-size: 28rpx;

				box-sizing: border-box;
			}

			.draft {
				color: #FFFFFF;
				margin-right: 50rpx;
				border-radius: 8rpx;
				background:url(../../../static/images/meal/gary.png) no-repeat;
				background-size: 100% 100%;
			}

			.upload {
				border-radius: 8rpx;
				background: url(../../../static/images/common/bluebg.png) no-repeat;
				background-size: 100% 100%;
				color: $uni-text-color-inverse;
			}
		}
	}

	.date {
		display: flex;
		justify-content: space-between;

		.box {
			width: 200rpx;
			padding-right: 16rpx;
			height: 56rpx;
			line-height: 52rpx;
			border: 2rpx solid #999999;
			border-radius: 8rpx;
			.date2-img {
				// vertical-align: sub;
				width: 24rpx;
				height: 24rpx;
				margin:0 10rpx;
			}
			.uni-input {
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #999999;
				white-space: nowrap;
				
				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
		.tag{
			margin-top: 6px;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.textarea {
		width: 100%;
		height: 100px;
		border: 1px solid #999999;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 20rpx;

		font-size: 32rpx;

		color: #999999;
	}

	.area {
		position: relative;

		.mit {
			position: absolute;
			bottom: 30px;
			right: 30rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.moneyBox{
		width: 100%;
		border: 2rpx solid #999999;
		height: 64rpx;
		display: flex;
		justify-content: space-between;
		color: #999999;
		align-items: center;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
</style>
